import React, { Component, createContext, useContext } from 'react'

// 二级页面

/***
 * 左边固定  右边自适
 * <a></a>
 * <a></a>
 *
 * 登陆页面
 */

/**
 *
 * 传参数：
 *
 * 1. 父子 属性 + props
 * 2. 子父 事件回调
 * 3. 嵌套传参 context
 *
 *     a
 *   b   c
 * d       e
 */

const context = createContext('hello world')

const A = () => {
  const myContext = useContext(context)
  return (
    <div>
      <h1>{myContext}</h1>
      <B></B>

      {/* <context.Consumer>
        {(msg) => {
          return <h2>{msg}</h2>
        }}
      </context.Consumer> */}
    </div>
  )
}

const B = () => {
  const myContext = useContext(context)
  return (
    <div>
      <h1>B</h1>
      <h2>{myContext}</h2>
      {/* <context.Consumer>
        {(msg) => {
          return <h2>{msg}</h2>
        }}
      </context.Consumer> */}
      <C></C>
    </div>
  )
}

const C = (props) => {
  // useContext 只能用在函数组件中
  const myContext = useContext(context)
  // console.log(myContext, 'myContext')
  return (
    <div>
      <h1>C</h1>
      <h1>{myContext}</h1>
      {/* <context.Consumer>
        {(msg) => {
          return <h2>{msg}</h2>
        }}
      </context.Consumer> */}
    </div>
  )
}

export default class index extends Component {
  state = {
    msg: 'hello world',
    list: [],
  }
  render() {
    return (
      <div>
        index
        <context.Provider value={this.state.msg}>
          <A msg={this.state.msg}></A>
        </context.Provider>
      </div>
    )
  }
}
